<template>
    <div>
        <van-calendar
        title="老黄历"
        :poppable="false"
        :show-confirm="false"
        :row-height="40"
        :style="{ height: '330px' }"
        @select="sayday"
        />
    <div id="lhl">
        <van-row gutter="10" class="rowstyle">
            <van-col span="12">
                <van-tag type="primary">阴历</van-tag>
                {{ this.wl.ganzhi_year }} 年 {{this.wl.lunar_month_chinese}}  {{wl.lunar_day_chinese}}
            </van-col>
            <van-col span="12">
                <van-tag type="primary">星座</van-tag>
                {{ wl.constellation }}
            </van-col>
        </van-row>

        <van-row gutter="10" class="rowstyle">
            <van-col span="12">
                <van-tag type="primary">宜</van-tag>
                {{ wl.yi }}
            </van-col>
            <van-col span="12">
                <van-tag type="primary">忌</van-tag>
                {{ wl.ji }}
            </van-col>
        </van-row>

        <van-row gutter="10" class="rowstyle">
        <van-col span="12">
            <van-tag type="primary">胎神</van-tag>
            {{ wl.taishen }}
        </van-col>
        <van-col span="12">
            <van-tag type="primary">彭祖百忌</van-tag>
            {{ wl.pengzuzhi }}
        </van-col>
    </van-row>

        <van-row gutter="10" class="rowstyle">
        <van-col span="12">
            <van-tag type="primary">吉神宜趋</van-tag>
            {{ wl.jishen }}
        </van-col>
        <van-col span="12">
            <van-tag type="primary">凶神宜吉</van-tag>
            {{ wl.xiongshen }}
        </van-col>
    </van-row>
    </div>
</div>
</template>

<script>
import moment from 'moment'
export default {
  data () {
    return {
      wl: {}
    }
  },
  created () {
    var dd = moment(new Date()).format('YYYY-MM-DD-HH')
    this.axios.get(`/api0?token=rBB0iXwOdaiVahhK&date=${dd}`).then(res => {
      this.wl = res.data
    })
  },
  methods: {
    sayday (value) {
      var dd = moment(value).format('YYYY-MM-DD-HH')
      this.axios.get(`/api0?token=rBB0iXwOdaiVahhK&date=${dd}`).then(res => {
        this.wl = res.data
      })
    }
  }
}

</script>

<style lang="less" scoped>
    #h1{
        text-align: left;
        font-size: 14px;
        padding: 10px;
        .rowstyle{
            margin: 5px 0;
            border-bottom: dotted 1px blue;
        }
    }
</style>
